<template>
  <el-dialog title="微信支付" width="440" :close-on-click-modal="false" :close-on-press-escape="false">
    <img :src="imgSrc" />
    <p>微信扫描二维码支付</p>
    <p>请使用微信扫一扫</p>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">关闭窗口</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reqGetOrderPay, reqGetOrderPayResult } from '@/api/order'
import { ElMessage } from 'element-plus'
import QRCode from 'qrcode'
import { ref } from 'vue'

const $emits = defineEmits(['close', 'success'])
let imgSrc = ref('')
let order = ref('')
let interval = ref()
const getCode = async (orderId: string) => {
  order.value = orderId
  const { data } = await reqGetOrderPay(orderId)
  let url = await QRCode.toDataURL(data.codeUrl)
  imgSrc.value = url
  interval.value = setInterval(() => {
    getResult()
  }, 2000)
}
defineExpose({
  getCode
})
const getResult = async () => {
  const { data } = await reqGetOrderPayResult(order.value)
  console.log(data)
  if (data) {
    ElMessage.success('支付成功')
    if (data) {
      clearInterval(interval.value)
      $emits('success')
    }
  }
}
// 关闭窗口回调函数
const close = () => {
  clearInterval(interval.value)
  $emits('close')
}
</script>

<style lang="scss" scoped>
img {
  width: 300px;
  height: 300px;
  display: block;
  margin: 0 auto;
}
p {
  line-height: 26px;
  text-align: center;
  font-size: 15px;
}
</style>
